@import (reference) '~@/assets/css/variables';


// 单行省略
.text_overflow_single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 多行省略
.text_overflow(@lineNum) {
  display: box;
  overflow: hidden;
  -webkit-line-clamp: @lineNum;

  /*! autoprefixer: off */
  box-orient: vertical;

  /*! autoprefixer: on */
}

// 动态显示省略号
.ellipsis_loading {
  &::after {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    animation: ellipsisLoading 1.6s infinite;
    content: '\2026';
  }
}

@keyframes ellipsisLoading {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

/* 页面布局的公共样式 */
// 内容中带有面包屑的布局
.page_content_with_breadcrumb {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page_content {
  display: flex;
  flex-direction: row;
  height: 100%;
  background-color: @white;
}

.page_content_column {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: @white;
}

.page_content_left + .page_content_right {
  flex: 1;
}

// 内容右侧布局
.page_content_right {
  width: 100%;
  height: 100%;
  padding: 0 24px 24px;
  overflow-x: hidden;
}

// 内容中不带有面包屑的布局
.page_content_without_breadcrumb {
  display: flex;
  flex-direction: row;
  height: 100%;
  background-color: @white;
}

// 在内容布局中的tabs
.page_content_tabs {
  :global {
    .ant-tabs-nav {
      height: 40px;
    }

    .ant-tabs-content-holder {
      overflow-x: hidden;
      overflow-y: auto;
    }

    .ant-tabs-tab {
      border-bottom: 0 !important;
    }

    .ant-tabs-nav {
      margin: 0 !important;
    }

    .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
      margin-left: 8px !important;
    }

    .ant-tabs-nav .ant-tabs-tab {
      background: linear-gradient(138deg, #f3f5f8 0%, #fff 100%) !important;
      border: 2px solid #fff !important;
      border-top-left-radius: 4px !important;
      border-top-right-radius: 4px !important;
      box-shadow: 8px 8px 20px rgb(55 99 170 / 12%);
    }

    .ant-tabs-nav .ant-tabs-tab-active {
      background: #fff !important;
    }

    .ant-tabs-nav .ant-tabs-tab::before {
      position: absolute;
      left: -2px;
      width: 3px;
      height: 20px;
      border-right: 3px solid #0084ff;
      border-radius: 0 2px 2px 0;
      transform: scaleY(0);
      opacity: 0;
      transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
      opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
      content: '';
    }

    .ant-tabs-nav .ant-tabs-tab-active::before {
      transform: scaleY(1);
      opacity: 1;
      transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
      opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .ant-tabs-tab {
      min-width: 96px;
    }
  }
}

// 在内容布局中的tabs高度，让tabs下的页面也可以撑满content范围
.page_content_tabs_height {
  :global {
    .ant-tabs {
      height: 100%;

      .ant-tabs-content {
        height: 100%;
      }

      .ant-tabs-tabpane {
        height: 100%;
      }
    }
  }
}

// 常用彩色icon快捷类名, 有新增在此处补充
:global {
  .hu-green {
    margin-right: 6px;
    color: @green;
  }

  .hu-blue {
    margin-right: 6px;
    color: @primary;
  }

  .hu-red {
    margin-right: 6px;
    color: @red;
  }

  .hu-gray {
    margin-right: 6px;
    color: @gray-500;
  }

  .hu-orange {
    margin-right: 6px;
    color: @orange;
  }

  .ka-wrapper {
    width: 100%;
    height: 100%;

    .ka-content {
      width: 100%;
      height: 100%;
    }
  }
}
